<template>
    <a-form layout="vertical" label-width="auto" ref="formRef" :model="modelValue" :rules="rules" label-position="top">
        <a-form-item label="真实姓名" field="realName">
            <a-input placeholder="请输入" v-model="modelValue.realName"></a-input>
        </a-form-item>
        <a-form-item label="身份证号" field="idNumber">
            <a-input placeholder="请输入" v-model="modelValue.idNumber"></a-input>
        </a-form-item>
        <a-form-item label="手机号" field="mobileNumber">
            <a-input placeholder="请输入" v-model="modelValue.mobileNumber"></a-input>
        </a-form-item>
        <a-form-item label="上传证件照" field="idCardFrontImage">
            <IdCardUpload v-model:frontUrl="modelValue.idCardFrontImage" v-model:backUrl="modelValue.idCardBackImage" />
        </a-form-item>
        <a-form-item label="身份证开始日期" field="idCardValidStartDate">
            <a-date-picker style="flex:1" v-model="modelValue.idCardValidStartDate" value-format="YYYY-MM-DD"
                placeholder="请选择" />
        </a-form-item>
        <a-form-item label="身份证结束日期" field="idCardValidEndDate">
            <EndTime v-model="modelValue.idCardValidEndDate" />
        </a-form-item>
    </a-form>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import IdCardUpload from "./IdCardUpload.vue";
import { mobile, identityCard, code, length, required } from "../rules";
import EndTime from "./EndTime.vue";
const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    }
});
const formRef = ref()
const emit = defineEmits(["update:modelValue"]);
/**
 * 身份证正反面校验
 */
const verifyIdentityCardImage = (value: String, callback: Function) => {
    const condition = (props.modelValue.idCardBackImage && props.modelValue.idCardFrontImage);
    if (condition) {
        return callback()
    } else if (!props.modelValue.idCardFrontImage) {
        return callback('请上传身份证正面')
    } else if (!props.modelValue.idCardBackImage) {
        return callback('请上传身份证反面')
    }
}
/**
 * 注册个人信息表单校验规则
 */
const rules = {
    mobileNumber: [
        mobile,
        required('请输入手机号'),
    ],
    idNumber: identityCard,
    verificationCode: [
        code(6),
        required('请输入验证码'),
    ],
    idCardValidStartDate: required('请选择身份证开始日期'),
    idCardValidEndDate: required('请选择身份证结束日期'),
    realName: [
        required('请输入姓名'),
        length(2, 50, '姓名')
    ],
    idCardFrontImage: [
        { validator: verifyIdentityCardImage, trigger: 'change' },
        required('请上传营业执照')
    ],
}
watch(() => props.modelValue.idCardFrontImage, () => {
    formRef.value.validateField(['idCardFrontImage'], () => { })
})
watch(() => props.modelValue.idCardBackImage, () => {
    formRef.value.validateField(['idCardFrontImage'], () => { })
})
const validate = () => {
    return new Promise((resolve) => {
        formRef.value.validate((error: any) => {
            resolve(error == undefined)
        })
    })
}
const resetFields = () => {
    return formRef.value.resetFields()
}
defineExpose({
    validate,
    resetFields
})
</script>

<style lang="scss" scoped></style>